<template>
  <view class="related-content">
    <view class="top-block view-block">
      <uni-section title="吊盘平衡" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      <view class="c-bg mb-20">
        <image class="icon-xy" src="/static/images/monitor/dp-x.png" mode=""></image>
        <text class="txt">X轴倾角</text>
        <text class="val">{{ hangingPlateBalance.xInclination || '0.00' }}°</text>
        <text class="txt">倾角超限</text>
        <image class="icon-dot-l" :src="require(`@/static/images/monitor/${hangingPlateBalance.xInclinationAlarm == 0 ? 'dot-l' : 'dot-l-red'}.png`)" mode=""></image>
      </view>

      <view class="c-bg">
        <image class="icon-xy" src="/static/images/monitor/dp-y.png" mode=""></image>
        <text class="txt">Y轴倾角</text>
        <text class="val">{{ hangingPlateBalance.yInclination || '0.00' }}°</text>
        <view class="txt">倾角超限</view>
        <image class="icon-dot-l" :src="require(`@/static/images/monitor/${hangingPlateBalance.yInclinationAlarm == 0 ? 'dot-l' : 'dot-l-red'}.png`)" mode=""></image>
      </view>
    </view>

    <view class="view-block">
      <uni-section title="稳车集控" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      <uni-row :gutter="90" class="row-list wsjk">
        <uni-col :span="12" class="col-item">
          <view class="lab-b">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">运行频率：</text>
          </view>
          <view class="val">{{ leftPageObjs.pl || 0 }}Hz</view>
        </uni-col>
        <uni-col :span="12" class="col-item">
          <view class="lab-b">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">运行方向：</text>
          </view>
          <view class="val">{{ leftPageObjs.fx == 2 ? '上提' : '下放' }}</view>
        </uni-col>
      </uni-row>

      <view class="list-bg">
        <view class="item" v-for="(item, index) in steadyCar" :key="index + 's'">
          <image class="icon" src="/static/images/monitor/jk-icon.png" mode=""></image>
          <text class="name">{{ item.name }}</text>
          <text class="val">电流：{{ item.current || '0' }}A</text>
          <text class="lab">运行</text>
          <image class="icon-dot-s mr-20" :src="require(`@/static/images/monitor/${+item.run == 0 || +item.run != NaN ? 'dot-s' : 'dot-s-red'}.png`)" mode=""></image>
          <text class="lab">速度</text>
          <image class="icon-dot-s" :src="require(`@/static/images/monitor/${+item.speeding == 0 || +item.speeding != NaN ? 'dot-s' : 'dot-s-red'}.png`)" mode=""></image>
        </view>

        <view class="item" v-for="(item, index) in templateStabilizer" :key="index + '_t'">
          <image class="icon" src="/static/images/monitor/jk-icon.png" mode=""></image>
          <text class="name">{{ item.name }}</text>
          <text class="val">电流：{{ item.current || '0' }}A</text>
          <text class="lab">运行</text>
          <image class="icon-dot-s mr-20" :src="require(`@/static/images/monitor/${+item.run == 0 || +item.run != NaN ? 'dot-s' : 'dot-s-red'}.png`)" mode=""></image>
          <text class="lab">速度</text>
          <image class="icon-dot-s" :src="require(`@/static/images/monitor/${+item.speeding == 0 || +item.speeding != NaN ? 'dot-s' : 'dot-s-red'}.png`)" mode=""></image>
        </view>
      </view>
    </view>

    <view class="view-block">
      <uni-section title="稳车过载" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      <view class="state-box">
        <text class="txt">过载保护停车</text>
        <image class="icon-dot-s" :src="require(`@/static/images/monitor/dot-s.png`)" mode=""></image>
      </view>

      <uni-row :gutter="90" class="row-list">
        <uni-col :span="12" class="col-item" v-for="(item,index) in formworkRope" :key="index+'_f'">
          <view class="lab-b">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">{{item.name}}：</text>
          </view>
          <view class="val">{{ item.pull || 0 }}t(吨)</view>
        </uni-col>
        
        <uni-col :span="12" class="col-item" v-for="(item,index) in hangingRope" :key="index+'_h'">
          <view class="lab-b">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">{{item.name}}：</text>
          </view>
          <view class="val">{{ item.pull || 0 }}t(吨)</view>
        </uni-col>
        
      </uni-row>
    </view>
  </view>
</template>

<script>
import { getWinchMonitor } from '@/api/monitorCenter/index.js';

export default {
  data() {
    return {
      hangingPlateBalance: {
        xInclination: '',
        yInclination: '',
        xInclinationAlarm: '',
        yInclinationAlarm: ''
      },
      leftPageObjs: {
        pl: '',
        fx: ''
      },
      steadyCar: [],
      templateStabilizer: [],
      formworkRope: [],
      hangingRope: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const { data, code } = await getWinchMonitor('dpph');
      if (code != 200) return;
      this.dataHooks(data);
    },
    dataHooks(data) {
      this.hangingPlateBalance.xInclination = data.t_40001 || 0;
      this.hangingPlateBalance.yInclination = data.t_40002 || 0;
      this.hangingPlateBalance.xInclinationAlarm = data.t_40003 || 0;
      this.hangingPlateBalance.yInclinationAlarm = data.t_40004 || 0;

      this.leftPageObjs.pl = data.t_120046 || 0;
      this.leftPageObjs.fx = data.t_120047 || 0;
      //稳车
      let steadyCar = [
        {
          name: '一号吊盘稳车',
          current: data.t_120001 || 0,
          run: data.t_120016 || 0,
          speeding: data.t_140005 || 0
        },
        {
          name: '二号吊盘稳车',
          current: data.t_120002 || 0,
          run: data.t_120017 || 0,
          speeding: data.t_140006 || 0
        },
        {
          name: '三号吊盘稳车',
          current: data.t_120003 || 0,
          run: data.t_120018 || 0,
          speeding: data.t_140007 || 0
        },
        {
          name: '四号吊盘稳车',
          current: data.t_120004 || 0,
          run: data.t_120019 || 0,
          speeding: data.t_140008 || 0
        },
        {
          name: '五号吊盘稳车',
          current: data.t_120005 || 0,
          run: data.t_120020 || 0,
          speeding: data.t_140009 || 0
        },
        {
          name: '六号吊盘稳车',
          current: data.t_120006 || 0,
          run: data.t_120021 || 0,
          speeding: data.t_140010 || 0
        },
        {
          name: '七号吊盘稳车',
          current: data.t_120007 || 0,
          run: data.t_120022 || 0,
          speeding: data.t_140017 || 0
        },
        {
          name: '八号吊盘稳车',
          current: data.t_120008 || 0,
          run: data.t_120023 || 0,
          speeding: data.t_140018 || 0
        }
      ];

      this.steadyCar.splice(0, this.steadyCar.length, ...steadyCar);

      // 模版稳车
      let templateStabilizer = [
        {
          name: '一号模板稳车',
          current: data.t_120001 || 0,
          run: data.t_120016 || 0,
          speeding: data.t_140001 || 0
        },
        {
          name: '二号模板稳车',
          current: data.t_120002 || 0,
          run: data.t_120017 || 0,
          speeding: data.t_140002 || 0
        },
        {
          name: '三号模板稳车',
          current: data.t_120003 || 0,
          run: data.t_120018 || 0,
          speeding: data.t_140007 || 0
        },
        {
          name: '四号模板稳车',
          current: data.t_120004 || 0,
          run: data.t_120019 || 0,
          speeding: data.t_140004 || 0
        }
      ];

      this.templateStabilizer.splice(0, this.templateStabilizer.length, ...templateStabilizer);

      // 模版绳
      let formworkRope = [
        {
          name: '1#模板绳',
          pull: data.t_130001 || 0,
          alarm: data.t_130011 || 0,
          overload: data.t_130021 || 0
        },
        {
          name: '2#模板绳',
          pull: data.t_130002 || 0,
          alarm: data.t_130012 || 0,
          overload: data.t_130022 || 0
        },
        {
          name: '3#模板绳',
          pull: data.t_130003 || 0,
          alarm: data.t_130013 || 0,
          overload: data.t_130023 || 0
        },
        {
          name: '4#模板绳',
          pull: data.t_130004 || 0,
          alarm: data.t_130014 || 0,
          overload: data.t_130024 || 0
        }
      ];

      this.formworkRope.splice(0, this.formworkRope.length, ...formworkRope);

      //吊盘绳
      let hangingRope = [
        {
          name: '1#吊盘绳',
          pull: data.t_130005 || 0,
          alarm: data.t_130015 || 0,
          overload: data.t_130025 || 0
        },
        {
          name: '2#吊盘绳',
          pull: data.t_130006 || 0,
          alarm: data.t_130016 || 0,
          overload: data.t_130026 || 0
        },
        {
          name: '3#吊盘绳',
          pull: data.t_130007 || 0,
          alarm: data.t_130017 || 0,
          overload: data.t_130027 || 0
        },
        {
          name: '4#吊盘绳',
          pull: data.t_130008 || 0,
          alarm: data.t_130018 || 0,
          overload: data.t_130028 || 0
        },
        {
          name: '5#吊盘绳',
          pull: data.t_130009 || 0,
          alarm: data.t_130019 || 0,
          overload: data.t_130029 || 0
        },
        {
          name: '6#吊盘绳',
          pull: data.t_130010 || 0,
          alarm: data.t_130020 || 0,
          overload: data.t_130030 || 0
        },
        {
          name: '7#吊盘绳',
          pull: data.t_130032 || 0,
          alarm: data.t_130034 || 0,
          overload: data.t_130036 || 0
        },
        {
          name: '8#吊盘绳',
          pull: data.t_130033 || 0,
          alarm: data.t_130035 || 0,
          overload: data.t_130037 || 0
        }
      ];
    
      this.hangingRope.splice(0, this.hangingRope.length, ...hangingRope);
    }
  }
};
</script>

<style lang="scss" scoped>
.related-content {
  overflow-y: auto;
  
  .top-block {
    // box-shadow: 0rpx -15rpx 21rpx -5rpx rgba(0, 0, 0, 0.25);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
  }

  .view-block {
    background: #fff;
    padding: 20rpx 30rpx 30rpx;
    margin-bottom: 40rpx;
  }

  .state-box {
    width: 100%;
    height: 65rpx;
    background: rgba(46, 125, 255, 0.1);
    border-radius: 5rpx 5rpx 5rpx 5rpx;
    padding: 13rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 26rpx;
    color: #2e7dff;
    line-height: 26rpx;
  }
  .mb-20 {
    margin-bottom: 22rpx;
  }
  .c-bg {
    width: 100%;
    height: 102rpx;
    background: rgba(46, 125, 255, 0.1);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    display: flex;
    align-items: center;
    padding: 12rpx 26rpx;

    .icon-xy {
      width: 75rpx;
      height: 75rpx;
    }

    .icon-dot-l {
      width: 33rpx;
      height: 33rpx;
    }

    .txt {
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;
      padding-left: 30rpx;
      padding-right: 25rpx;
    }
    .val {
      font-family: 快看世界体, 快看世界体;
      font-weight: 400;
      font-size: 32rpx;
      width: 120rpx;
      padding-left: 20rpx;
      line-height: 32rpx;
    }
  }

  .row-list.wsjk {
    .col-item {
      padding-top: 0;
    }
  }
  .icon-dot-s {
    width: 22rpx;
    height: 22rpx;
  }
  .list-bg {
    .item {
      width: 100%;
      height: 62rpx;
      background: rgba(46, 125, 255, 0.1);
      border-radius: 10rpx 10rpx 10rpx 10rpx;

      font-weight: 500;
      font-size: 26rpx;
      color: #000000;

      display: flex;
      align-items: center;

      margin-top: 30rpx;
      padding-left: 12rpx;

      .icon {
        width: 32rpx;
        height: 32rpx;
      }

      .name {
        padding-left: 8rpx;
        width: 230rpx;
      }
      .val {
        width: 194rpx;
      }
      .lab {
        padding-right: 10rpx;
      }

      .mr-20 {
        margin-right: 22rpx;
      }
    }
  }

  .row-list {
    .col-item {
      font-size: 24rpx;
      display: flex;
      justify-content: space-between;
      padding-top: 30rpx;
    }
    .lab-b {
      .icon {
        width: 22rpx;
        height: 13rpx;
      }

      .lab {
        padding-left: 5rpx;
        color: rgba(16, 44, 89, 0.5);
      }
    }
    .val {
      color: rgba(16, 44, 89, 1);
      padding-right: 20rpx;
    }
  }
}

::v-deep .uni-section .uni-section-header {
  padding: 0 0 20rpx 0;
}
</style>
